import { Card as SemiCard, Button, ButtonGroup, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconUpload, IconEdit, IconDelete, IconEyeOpened, IconSave } from "@douyinfe/semi-icons";
import { Popconfirm, Card, Space, Image as AntdImage, Row, Col, Image, Tag, Modal, message, Form, Input, Table } from "antd";
import { v4 as uuidv4 } from "uuid";
import { useModel, useOutletContext, history } from "umi";
import { useReactive } from "ahooks";
import { useState, useEffect } from "react";
import React from "react";

import ChooseCommodity from "../../components/discount_package/ChooseCommodity";
import EditCommodity from "../../components/discount_package/EditCommodity";

const DiscountPackageCommoditiesPage = () => {
    const { selectItem, cardBodyHeight } = useOutletContext();
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent, setModalStyle } = useModel("global.modal");
    const { imageBase64 } = useModel("global");

    const openChooseCommodityModal = (r) => {
        setModalTitle("添加推荐商品");
        setModalVisible(true);
        setModalWidth(800);
        setModalStyle({ top: 100 });
        setModalComponent(<ChooseCommodity reloadData={console.log(11)} record={r} />);
    };

    const openEditCommodityModal = (r) => {
        setModalTitle("编辑商品");
        setModalVisible(true);
        setModalWidth(500);
        setModalStyle({ top: 100 });
        setModalComponent(<EditCommodity reloadData={console.log(11)} record={r} />);
    };

    return (
        <Card
            title="商品清单"
            size="small"
            bordered
            bodyStyle={{ padding: 0 }}
            extra={
                <ButtonGroup>
                    <Button icon={<IconPlusCircle />} onClick={openChooseCommodityModal}>
                        添加商品
                    </Button>
                    <Button icon={<IconRefresh />}></Button>
                </ButtonGroup>
            }
        >
            <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                <Table.Column title="顺序" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column
                    title="商品图片"
                    dataIndex="ciPict"
                    key="ciName"
                    align="left"
                    width={80}
                    render={(_, r) => <AntdImage preview width={60} height={60} src={imageBase64} fallback={imageBase64} />}
                />
                <Table.Column title="商品全称" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="商品单位" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="商品数量" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="商品原价" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="商品会员价" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="套餐内单价" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="套餐内总价" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />

                <Table.Column
                    title="操作"
                    width={90}
                    dataIndex="ciSepr"
                    key="ciSepr"
                    align="right"
                    render={(_, r) => (
                        <ButtonGroup>
                            <Button icon={<IconEdit />} onClick={(r) => openEditCommodityModal(r)}></Button>
                            <Button icon={<IconDelete />}></Button>
                        </ButtonGroup>
                    )}
                />
            </Table>
        </Card>
    );
};

export default DiscountPackageCommoditiesPage;
